.et-page-content {
  padding-top: $et-top-bar-height;
  header {
    background-color: #FFF;
    padding: 0.9375rem 1rem;
    border-bottom: 1px solid $et-medium-gray;
    margin-bottom: 1rem;
    .breadcrumbs {
      margin: 0;
      li {
        font-size: 0.75rem;
      }
    }
  }
}

.et-main-content {
  padding-left: $et-nav-width;
  transition: all 0.2s;
}

.off-canvas-content {
  background-color: $et-light-gray;
  position: relative;
  @include breakpoint(medium only) {
    @include et-narrow-nav;
  }
  @include breakpoint(small only) {
    .et-top-bar {
      left: 0;
      background-color: $et-nav-1st-bg;
      color: $et-medium-gray;
    }
    .et-main-content {
      padding-left: 0;
    }
    .et-bottom-bar {
      padding-left: 0;
    }
  }
}

.et-medium {
  @include et-narrow-nav;
}

.et-grid {
  padding: 0 1rem 1rem;
}

.et-mask {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 91;
  visibility: hidden;
  background-color: rgba($black, 0.5);
  opacity: 0;
  transition: visibility 0s, opacity 0.2s linear;

  &.et-is-visible {
    visibility: visible;
    opacity: 1;
  }
}

.et-clear-margin-bottom {
  margin-bottom: 0;
}

.button-group {
  .button {
    height: 2.5rem;
    margin-bottom: 0;
    padding: 0.75em 1em;

    i, span {
      vertical-align: middle;
    }
  }
}

#offCanvasRight {
  padding-top: 3.25rem;
}

.page-not-found-icon {
  padding-top: 10rem;

  i {
    color: $et-dark-gray;
    font-size: 12rem;
  }

  span {
    display: block;
    font-size: 3rem;
    color: $et-dark-gray;
  }
}

.callout {
  width: 100%;
}

.et-err-btn {
  i {
    font-size: 0.875rem;
    color: $alert-color;
  }
}
